<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>房间新增</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css"
          rel="stylesheet"/>

    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
<style>
	.lt{
	float:left;
	}
	.form-group{
		*overflow:hidden;
	}
	.form-control{
		width:500px\9;
		*+width:500px;
		height:32px\9;
		*+height:22px;
	}
	#select2-cBuildingId-container,#select2-unitId-container{
		width:500px\9;
		*+width:500px;
	}
	.control-label {
		width:160px\9;
		*+width:160px;
		height:32px\9;
		*+height:22px;
		text-align:right\9;
		*+text-align:right;
	}
</style>
</head>
<body>
<div class="col-sm-12">
    <form class="form-horizontal m-t" id="form" method="post"
          action="${pageContext.request.contextPath}/admin/croom_add.action">
       	 <input type="hidden" name="communityId" value="${communityId}">
         <div class="form-group">
	        <label class="col-sm-3 control-label lt"><i class="require">*</i>楼栋:</label>
	        <div class="col-sm-8 lt">
                  <select name="cBuildingId" id="cBuildingId" class="form-control"></select>
             </div>
	
	    </div>
         <div class="form-group">
            <label class="col-sm-3  control-label lt"><i class="require">*</i>单元:</label>
            <div class="col-sm-8 lt">
                <select name="unitId" id="unitId" class="form-control"></select>
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label lt"><i class="require">*</i>所属楼层:</label>
            <div class="col-sm-8 lt">
               <input class="form-control" name="floorNo" id="floorNo"  size="30" />
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label lt"><i class="require">*</i>房间号:</label>
            <div class="col-sm-8 lt">
            <input class="form-control" name="roomNo" id="roomNo"  size="30" />
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label lt"><i class="require">*</i>户主姓名:</label>
            <div class="col-sm-8 lt">
            <input class="form-control" name="ownerName" id="ownerName"  size="30" />
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label lt"><i class="require">*</i>户主手机:</label>
            <div class="col-sm-8 lt">
            <input class="form-control" name="ownerTel" id="ownerTel"  size="30" />
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label lt"><i class="require"></i>身份证号码:</label>
            <div class="col-sm-8 lt">
            <input class="form-control" name="ownerIdNumber" id="ownerIdNumber"  size="30" maxlength="18"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label lt"><i class="require">*</i>房租状态:</label>
            <div class="col-sm-8 lt">
                <div class="col-sm-2 m-t2 lt">
                    <input type="radio" checked name="status" size="30" value="1"/><label>自住</label>
                </div>
                <div class="col-sm-2 m-t2 lt">
                    <input type="radio" name="status" size="30" value="2"/><label>出租</label>
                </div>
                <div class="col-sm-2 m-t2 lt">
                    <input type="radio" name="status" size="30" value="3"/><label>空置</label>
                </div>
            </div>
        </div>
        <div id="mTypeDiv" style="display:none">
            <div class="form-group">
            <label class="col-sm-3  control-label lt"><i class="require">*</i>租客姓名:</label>
            <div class="col-sm-8 lt">
            <input class="form-control" name="renterName" id="renterName"  size="30" />
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label lt"><i class="require">*</i>租客手机:</label>
            <div class="col-sm-8 lt">
            <input class="form-control" name="renterTel" id="renterTel"  size="30" />
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label lt"><i class="require"></i>租客身份证号码:</label>
            <div class="col-sm-8 lt">
            <input class="form-control" name="renterIdNumber" id="renterIdNumber"  size="30" maxlength="18"/>
            </div>
        </div>
        </div>
    </form>
</div>
<script type="text/javascript">
$(function () {
	 $('input:radio[name="status"]').change( function(){
     	var selectedvalue = $("input:radio[name='status']:checked").val();
			if (selectedvalue == 2) {
				$("#mTypeDiv").attr("style","");
			} else {
				$("#mTypeDiv").attr("style","display:none");
			}
     });
	$.post("${pageContext.request.contextPath}/admin/cbuilding_list.action",{"communityId": '${communityId}'},function (data) {
        $("#cBuildingId").empty();
        $("#cBuildingId").append("<option value=''>请选择楼栋</option>");
        for (var i = 0; i < data.length; i++) {
            $("#cBuildingId").append("<option value='" + data[i].sid + "'>" + data[i].cbName + "</option>");
        }
        $("#cBuildingId").select2({
            "placeholder": "请选择楼栋",
            "width": "100%"
        })
        $("#unitId").select2({
             "placeholder": "请选择单元",
             "width": "100%"
	     })
         $("#cBuildingId").change(function () {
           	var data = $(this).val();
           	$.post("${pageContext.request.contextPath}/admin/cinstallunit_listUnit.action", {"bsid": data},function (data) {
	            $("#unitId").empty();
	            $("#unitId").append("<option value=''>请选择单元</option>");
	            for (var i = 0; i < data.length; i++) {
	                $("#unitId").append("<option value='"+data[i].SID+"'>"+data[i].CBNAME+"</option>");
	            }
	        }, "json");
           })
    }, "json");
})
 
</script>
</body>
</html>
